<template>
	<view>
		<view class="sad11">选择开始时间和结束时间:</view>
		<!-- <uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section> -->
				<view class="example-body">
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
				</view>
		<view class="sad11">间隔时间:</view>
		<view class="inter22" ><uni-data-select
			v-model="intertime2"
			:localdata="intervalTime"
			@change="change232"
			></uni-data-select>
		</view>
		<view class="button"><button class="wqeqwe" type="primary" @click="switchBtn"><text>搜索</text></button>
				<!-- <button class="button" type="primary" @click="switchBtn(0)">重置</button> -->
		</view>

		<view class="CCC"></view>
		<view>
			<!-- <span class="saqwe1">最小值:</span> -->
			<input  type="text" v-model="taoyaa.numerica1" placeholder="请输入最小值" class="saqwe2"  />
			<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
			<input  type="text" v-model="taoyaa.numerica2" placeholder="请输入最大值" class="saqwe4"  />
		</view>
		<view class="content">
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">油压套压曲线图</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA1" @touchmove="moveLineA1" @touchend="touchEndLineA1">
				</canvas>
			</view>
		</view>
		<view>
			<!-- <span class="saqwe1">最小值:</span> -->
			<input  type="text" v-model="taoyab.numericb1" placeholder="请输入最小值" class="saqwe2"  />
			<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
			<input  type="text" v-model="taoyab.numericb2" placeholder="请输入最大值" class="saqwe4"  />
		</view>
		<view class="content" >
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">产水产气曲线图<!-- <text style="fontSize: 3px;
		color: #c1bdb9;">（近30天记录）</text> --></view>
			</view>

		</view>

		<view class="BBB">
			<view class="qiun-charts" >
				<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"/>
			</view>
		</view>
		<view>
			<!-- <span class="saqwe1">最小值:</span> -->
			<input  type="text" v-model="taoyac.numericc1" placeholder="请输入最小值" class="saqwe2"  />
			<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
			<input  type="text" v-model="taoyac.numericc2" placeholder="请输入最大值" class="saqwe4"  />
		</view>
		<view class="content">
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">节流前后温度</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts" >
				<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" @touchstart="touchstart3" @touchmove="touchmove3" @touchend="touchend3"/>
			</view>
		</view>
		<view>
			<!-- <span class="saqwe1">最小值:</span> -->
			<input  type="text" v-model="taoyad.numericd1" placeholder="请输入最小值" class="saqwe2"  />
			<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
			<input  type="text" v-model="taoyad.numericd2" placeholder="请输入最大值" class="saqwe4"  />
		</view>
		<view class="content">
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">平台瞬产总计</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts" >
				<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts" @touchstart="touchstart4" @touchmove="touchmove4" @touchend="touchend4"/>
			</view>
		</view>
		<view>
			<!-- <span class="saqwe1">最小值:</span> -->
			<input  type="text" v-model="taoyae.numerice1" placeholder="请输入最小值" class="saqwe2"  />
			<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
			<input  type="text" v-model="taoyae.numerice2" placeholder="请输入最大值" class="saqwe4"  />
		</view>
		<view class="content">
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">计量瞬量</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts" >
				<canvas canvas-id="canvasLineE" id="canvasLineE" class="charts" @touchstart="touchstart5" @touchmove="touchmove5" @touchend="touchend5"/>
			</view>
		</view>

	</view>
</template>

<script>
	import Loading1 from "@/compoents/loading11.vue";
	//import uCharts from '@/js_sdk/u-charts/u-charts.js';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import { timeTrans } from '@/js_sdk/u-charts/time.js';
	import getDateTime from '@/common/getdateTime.js';
	var _self;
	var canvaLineA=null;
	var canvaLineB=null;
	var lastMoveTime2=null
	var lastMoveTime=null;//最后执行移动的时间戳
	var uChartsInstance = {};
	var uChartsInstance3 = {};
	var uChartsInstance4 = {};
	var uChartsInstance5 = {};
	var uChartsInstance7 = {};
	export default {
		components:{
			Loading1,
		},
		data() {
			return {
				taoyab:{
					numericb1:null,//输入产水产气的值
					numericb2:null,
				},
				taoyaa:{
					numerica1:null,//油压套压的值
					numerica2:null,
				},
				taoyac:{
					numericc1:null,//节流前后的值
					numericc2:null,
				},
				taoyad:{
					numericd1:null,//平台瞬产的值
					numericd2:null,
				},
				taoyae:{
					numerice1:null,//计量瞬量的值
					numerice2:null,
				},
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				itemCount:4,
				textarea:'',
				Interactive:'',//交互显示的数据
				startDate: '',
				endDate: '',
				step: '',
				tempAxis:'',
				yAxis1:'',
				yAxis2:'',
				yAxis3:'',
				yAxis4:'',
				yAxis4Max:'',
				yAxis5:'',
				yAxis6:'',
				yAxis6Max:'',
				yAxis7:'',//产水产气x轴
				yAxis7Max:'',
				tempAxis3:'',//产水产气y轴
				waterAxis:'',
				wateryAxis:'',
				gasyAxis:'',
				waringText:[],
				mode:'',
				currentOpenWellTime:'',
				currentCloseWellTime:'',
				currentStatus:'',
				countdownTime:'',
				waterAxisMax:'',
				pressureAxisMax:'',
				loadingA:'',
				loadingB:'',
				// 平台瞬产曲线的数据
				ptInstnatChartData: {
				  wellName: '',
				  firstyAxisData: [],
				  xAxisData: [],
				  axisName: ['平台瞬产总计'],
				  yAxisName: '产气量 (10⁴m³/d)',
				  maxValue: '',
				  minValue: '',
				},
				allTags:[],
				allTagsMap:[],
				//选择间隔时间
				intervalTime:[{text:'30秒',value:'30s'},{text:'5分钟',value:'300s'},
							{text:'10分钟',value:'600s'},{text:'30分钟',value:'1800s'},
							{text:'1小时',value:'3600s'},{text:'1天',value:'86400s'},],
				intertime2:'',
				datetimerange:[],//开始时间和结束时间
				wellwId:'',//当前井号
				isSearch:false,//是否开启搜索参数
			}
		},
		onReady() {

		},
		onShareAppMessage(){
		},
		onLoad(option) {
			_self = this;
			//this.getWarning(option.well_id);
			//this.getTitie(option.well_name);
			//this.getZszt(option.well_id);
			//this.getServerDatas(option.well_id);
			this.wellwId=option.well_id;
			this.getServerDatas(option.well_id);
			this.getWaterData(option.well_id);
			this.initPtInstantData(option.well_id);
			this.cWidth=uni.upx2px(700);
			this.cHeight=uni.upx2px(400);
			//this.tbjz();
			//console.log(option)
		},
		watch: {
			datetimerange(newval) {
				//console.log('范围选:', this.datetimerange);
			},
			//监听水压套压范围值a
			taoyaa: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis1))
					let eee2 = JSON.parse(JSON.stringify(_self.yAxis2))
					let eee3 = JSON.parse(JSON.stringify(_self.yAxis3))
			        if(_self.taoyaa.numerica1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyaa.numerica1){
			        			eee1[a]=null;
			        		}
			        	}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] < _self.taoyaa.numerica1){
								eee2[a]=null;
							}
						}
						for(let a = 0;a<eee3.length;a++){
							if(eee3[a] < _self.taoyaa.numerica1){
								eee3[a]=null;
							}
						}
			        };
					if(_self.taoyaa.numerica2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyaa.numerica2){
								eee1[a]=null;
							}
						}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] > _self.taoyaa.numerica2){
								eee2[a]=null;
							}
						}
						for(let a = 0;a<eee3.length;a++){
							if(eee3[a] > _self.taoyaa.numerica2){
								eee3[a]=null;
							}
						}
					};
			        let LineA={
			        	categories: _self.tempAxis,
			        	series:[{
			        	"name": "井口油压",
			        	"data": eee1,
			        	},{
			        	"name": "井口套压",
			        	"data": eee2,
			        	},{
			        	"name": "阀后压力",
			        	"data": eee3,
			        	},]
			        };
			        _self.drawCharts11("canvasLineA",LineA);
			        },
					deep: true,
			},
			//监听产水产气范围值 numericb1监听的变量，newName变化最新的值，oldName老数值
			taoyab: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.wateryAxis))
					let eee2 = JSON.parse(JSON.stringify(_self.gasyAxis))
			        if(_self.taoyab.numericb1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyab.numericb1){
			        			eee1[a]=null;
			        		}
			        	}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] < _self.taoyab.numericb1){
								eee2[a]=null;
							}
						}
			        };
					if(_self.taoyab.numericb2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyab.numericb2){
								eee1[a]=null;
							}
						}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] > _self.taoyab.numericb2){
								eee2[a]=null;
							}
						}
					};
			        let LineB={
			        	categories: _self.waterAxis,
			        	series:[{
			        		"smooth":true,
			        		"name": "产水量",
			        		"data": eee1,
			        	},{
			        		"smooth":true,
			        		"index":1,
			        		"name": "产气量",
			        		"data": eee2,
			        	}],
			        };
			        _self.drawCharts("canvasLineB",LineB);
			        },
					deep: true,
			},
			//节流前后温度围值
			taoyac: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis5))
					let eee2 = JSON.parse(JSON.stringify(_self.yAxis6))
			        if(_self.taoyac.numericc1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyac.numericc1){
			        			eee1[a]=null;
			        		}
			        	}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] < _self.taoyac.numericc1){
								eee2[a]=null;
							}
						}
			        };
					if(_self.taoyac.numericc2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyac.numericc2){
								eee1[a]=null;
							}
						}
						for(let a = 0;a<eee2.length;a++){
							if(eee2[a] > _self.taoyac.numericc2){
								eee2[a]=null;
							}
						}
					};
			        let LineC={
			        	categories: _self.tempAxis,
			        	series:[{
			        	"name": "节流前温度",
			        	"data": eee1,
			        	},{
			        	"name": "节流后温度",
			        	"data": eee2,
			        	}],
			        };
			        _self.showLineC("canvasLineC",LineC);
			        },
					deep: true,
			},
			//平台瞬产总计围值
			taoyad: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis7))
			        if(_self.taoyad.numericd1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyad.numericd1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyad.numericd2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyad.numericd2){
								eee1[a]=null;
							}
						}
					};
			        let LineD={
			        	categories: _self.tempAxis3,
			        	series:[{
			        	"name": "平台瞬产总计",
			        	"data": eee1,
			        	},]
			        };
			        _self.showLineD("canvasLineD",LineD);
			        },
					deep: true,
			},
			//计量瞬量围值e
			taoyae: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis4))
			        if(_self.taoyae.numerice1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyae.numerice1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyae.numerice2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyae.numerice2){
								eee1[a]=null;
							}
						}
					};
			        let LineE={
			        	categories: _self.tempAxis,
			        	series:[{
			        	"name": "计量瞬量",
			        	"data": eee1,
			        	},]	
			        };
			        _self.showLineE("canvasLineE",LineE);
			        },
					deep: true,
			},
		},
		methods: {
			//搜索按钮
			switchBtn(){
				this.isSearch=true;
				this.getServerDatas(this.wellwId);
				this.initPtInstantData(this.wellwId);
				this.getWaterData(this.wellwId)
			},
			//选择间隔时间
			change232(e){
				/* console.log("选择时间");
				console.log(e); */
			},
			// 查询失败时，一直加载直到成功
			async quList(url,j) {
			// console.log('查询失败')
			let isTrue = true
			do {
				await this.getRequest(url).then(resp => {
				if (resp.code === 0) {
					isTrue = false
					this.moreMap.set(j,resp.data)
					return isTrue;
				}
				})
			}while (isTrue)
			},
			//无数据时图表加载
			tbjz(){
				let LineA={categories:[],//this.tempAxis,
					series:[{
					"name": "油压",
					"data": [],
					},{
					"name": "套压",
					"data": [],
					},{
					"name": "阀后压力",
					"data": [],
					},]
				};
				let LineB={categories:[],
					series:[{
						"smooth":true,
						"name": "产水量",
						"data": [],
					},{
						"smooth":true,
						"index":1,
						"name": "产气量",
						"data": [],
					}]
				};
				_self.showLineB("canvasLineB",LineB);
				this.pressureAxisMax=10;
				this.showLineA("canvasLineA",LineA);
				//console.log(LineA.categories)
				this.loadingA=true;
				this.loadingB=true;
			},
			//title
			getTitie(name){
				uni.setNavigationBarTitle({
					title:name

				})
			},
			// 初始化平台瞬产数据
			initPtInstantData(well_id) {
			    this.requestingCount++
			// 先取得平台瞬量的distinct计量瞬量点
				let t=(new Date().getTime()- 24 * 60 * 60 * 1000).toFixed();
				let tend=new Date().getTime().toFixed();
				let startDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(t)));
				let endDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(tend)));
				let urlue2 = this.$requestUrl.requestUrl('/pi');
				var step = "30S";
				//判断是否为搜索
				if(this.isSearch === true){
					this.startDate=this.datetimerange[0];
					this.endDate=this.datetimerange[1];
					step = this.intertime2;
				};
					//console.log(this.$requestUrl.requestUrl('/zs'));
				uni.request({
					url:this.$requestUrl.requestUrl('/zs')+'/app/app/ptInstantPoints/'+well_id,
					data:{
					},
					success: function(ref) {
						let resp = ref.data;
						/* console.log("eeeeeeeeeeeee");
						console.log(ref); */
							if (resp) {
							  let ptInstantTags = []
							  for (let i = 0; i < resp.length; i++) {
							    ptInstantTags.push(resp[i].tag)
							  }
							  if (ptInstantTags.length != 0) {

							    //this.ptInstnatFlag = true

							    this.ptInstantTags = ptInstantTags
							    // 得到平台瞬产总计曲线数据
							    var sczjMap = new Map();

							    this.requestingCount++
							    this.ptMap = new Map()
							    // console.log(timeTrans(new Date()))
								urlue2 =urlue2+'/queryservice/queryInterpolatedValues2'
											+ '?tagNames=' + ptInstantTags + '&startDate=' + startDate
											 + '&endDate=' + endDate + '&step=' + step;
								/* console.log("sssssssssssssss");
								console.log(urlue2); */
								uni.request({
									url:urlue2,
									data:{
									},
									success: function(resp2) {
											/* console.log("zzzzzzzzzz");
											console.log(resp2); */
									  if (resp2) {
									    let data = null;
										data = resp2.data.data;
									    // 如果data存在
									    if (data) {
									      let ptInstantMap = new Map()
										  let ptInstantMap2 = new Map()
									      // 取出每一个tag的数据 并且做成array存入map里
									      let flag = true
									      let tempZeroAxis = []
										  let tempZeroAxis2 = []
										  /* console.log("看前面的");
										  console.log(ptInstantTags); */
									      for (let i = 0; i < ptInstantTags.length; i++) {
									        let tag = ptInstantTags[i]
									        // 如果tag存在
									        if (data[tag]) {
									          let arr = []
											  let arr2 = []
									          for (let j = 0; j < data[tag].length; j++) {
									            if (data[tag][j].value == null) {
									              arr.push(0)
												  arr2.push(0)
									            } else {
									              arr.push(data[tag][j].value.toFixed(2))
												  arr2.push(data[tag][j].time)
									            }
									            if (flag) {
									              tempZeroAxis.push(0)
									            }
									          }
									          flag = false
											   ptInstantMap.set(tag, arr)
									           ptInstantMap2.set(tag, arr2)
									        }
									      }
										  //y轴
									      ptInstantMap.forEach(v => {
									        for (let i = 0; i < v.length; i++) {
									          tempZeroAxis[i] = (parseFloat(tempZeroAxis[i]) + parseFloat(v[i])).toFixed(2)
									        }
									      });
										  //x轴
										  ptInstantMap2.forEach(v => {
										    for (let i = 0; i < v.length; i++) {
										      tempZeroAxis2[i] = v[i]
										    }
										  });
										 /* console.log("y轴oooooo");
										  console.log(tempZeroAxis);
										  console.log(tempZeroAxis2); */
										  _self.tempAxis3=tempZeroAxis2;
										  _self.yAxis7=tempZeroAxis;
										  _self.yAxis7Max = _self.xAxisMax2(tempZeroAxis);
										  /* console.log("y轴oooooo");
										  console.log(_self.yAxis7Max); */
									      //this.ptInstnatChartData.firstyAxisData = tempZeroAxis;
									      /* sczjMap.set(j, tempZeroAxis); */
									    }
									  }
									  //console.log("subX");
									  //console.log(subX);

									  /* console.log("平台瞬产数据结束"); */
									  /* console.log(this.ptInstnatChartData.firstyAxisData);
									  _self.yAxis6 = this.ptInstnatChartData.firstyAxisData */
									let LineD={
										categories: _self.tempAxis3,
										series:[{
										"name": "平台瞬产总计",
										"data": _self.yAxis7,
										},]
									};
									_self.showLineD("canvasLineD",LineD);

								  },
									}

							    )}
							  }
						},
				});
			},
			//井口油压，井口套压，阀后压力，计量瞬量，节前温度，节后温度
			getServerDatas(wellId){
				//console.log(wellId);
				//获取tag
				//let url2='http://127.0.0.1:9011/zsgl/wellCurve/allTags/'+this.wellId;
				let url2=this.$requestUrl.requestUrl('/zs')+'/app/app/allTags/'+wellId;
				uni.request({
					url:url2,
					data:{},
					success: (ruf) => {
						//console.log(ruf);
						//console.log("第一层");
						let allTags = [];
						let allTagsMap = new Map();
						// 收集所有油压、套压、阀后压力 tag
						// 1:瞬量 2:阀后压力 3:油压 4:套压 5:温度 6:节流后温度 9:进气压力 10: 排气压力
						// 排除7:孔板阀计量昨日类 因为这个需要按天数来 单独使用
						for (let i = 0; i < ruf.data.length ; i++) {
						  if(ruf.data[i].px == 1 || ruf.data[i].px == 2 || ruf.data[i].px == 3 || ruf.data[i].px == 4 || ruf.data[i].px == 5|| ruf.data[i].px == 6){
						    //console.log(ruf.data[i].tag);
							allTags.push(ruf.data[i].tag);
						    allTagsMap.set(ruf.data[i].tag, ruf.data[i].px);
						  }
						}
						/* console.log(allTags);
						console.log(allTagsMap); */
						this.allTags = allTags;
						this.allTagsMap = allTagsMap;
						let t=(new Date().getTime()- 24 * 60 * 60 * 1000).toFixed();
						let tend=new Date().getTime().toFixed();
						this.startDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(t)));
						this.endDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(tend)));
						var step = "30S";
						//判断是否为搜索
						if(this.isSearch === true){
							//console.log("搜索里面1");
							this.startDate=this.datetimerange[0];
							this.endDate=this.datetimerange[1];
							step = this.intertime2;
						};
						let tagUrl = this.$requestUrl.requestUrl('/pi')+'/queryservice/queryInterpolatedValues2?tagNames='
									 + this.allTags + "&startDate=" + this.startDate +
									 "&endDate=" + this.endDate + "&step=" + step;
						uni.request({
							url: tagUrl,
							data:{
							},
							success: function(resp) {
								/* console.log(resp);
								console.log("第二层"); */
								var data=resp.data.data;
								/* console.log(data);
									console.log(_self.allTags); */
								for (let i = 0; i <_self.allTags.length ; i++) {
						                    // 取得数组里的每个tag
											//console.log("vvvvvv");
						                    let tag = _self.allTags[i];
						                    // 计算一次X轴所有坐标
						                      if(data[tag]){
						                        let xAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          xAxis.push(data[tag][j].time);
						                        }
						                        _self.tempAxis = xAxis;
						                      }

						                    // 如果tag存在
						                    if(data[tag]){
												/* console.log("tagpppppppppppp");
												console.log(_self.allTagsMap.get(tag)); */
						                      // 瞬量
						                      if(_self.allTagsMap.get(tag) == 1){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push(null);
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }
						                        }
						                        _self.yAxis4 = yAxis;
												_self.yAxis4Max = _self.xAxisMax2(yAxis);
												/* console.log("_self.yAxis4Max");
												console.log(_self.yAxis4Max); */
						                      }
						                      // 阀后压力
						                      else if (_self.allTagsMap.get(tag) == 2){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push("");
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }
						                        }
						                        _self.yAxis3 = yAxis;
												/* console.log("阀后压力11");
												console.log(yAxis); */
						                      }
						                      // 油压
						                      else if (_self.allTagsMap.get(tag) == 3){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push("");
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }
						                        }
												/* console.log("油压");
												console.log(yAxis); */
						                        _self.yAxis1 = yAxis;
						                      }
						                      // 套压
						                      else if (_self.allTagsMap.get(tag) == 4){
						                        let yAxis = [];
						                        for (let j = 0; j < data[tag].length ; j++) {
						                          if(data[tag][j].value == null){
						                            yAxis.push("");
						                          }
						                          else{
						                            yAxis.push(data[tag][j].value.toFixed(2));
						                          }
						                        }
												/* console.log("套压");
												console.log(yAxis); */
						                        _self.yAxis2 = yAxis;
						                      }
											  // 温度

											else if (_self.allTagsMap.get(tag) == 5) {
												 /* console.log("温度");
												 console.log(data[tag]); */
											  let yAxis = []
											  for (let j = 0; j < data[tag].length; j++) {
											    if (data[tag][j].value == null) {
											      yAxis.push("")
											    } else {
											      yAxis.push(data[tag][j].value.toFixed(2))
											    }
											  }
											 /* console.log("温度");
											  console.log(yAxis); */
											  // this.temperatureChartData.firstyAxisData = yAxis
											  _self.yAxis5 = yAxis;

											}
											 // 节流后温度
											 else if (_self.allTagsMap.get(tag) == 6) {
											   let yAxis = []
											   for (let j = 0; j < data[tag].length; j++) {
											     if (data[tag][j].value == null) {
											       yAxis.push("")
											     } else {
										        yAxis.push(data[tag][j].value.toFixed(2))
											     }
											   }
											  /* console.log("2温度2");
											   console.log(yAxis); */
											   // this.temperatureChartData.secondyAxisData = yAxis
											   _self.yAxis6 = yAxis;
											   _self.yAxis6Max = _self.xAxisMax2(yAxis);
											 }


						                    }
						                  }
								//后续
								/* console.log("井口油压");
								console.log(_self.yAxis1); */
								let LineA={
									categories: _self.tempAxis,
									series:[{
									"name": "井口油压",
									"data": _self.yAxis1,
									},{
									"name": "井口套压",
									"data": _self.yAxis2,
									},{
									"name": "阀后压力",
									"data": _self.yAxis3,
									},]
								};
								let LineC={
									categories: _self.tempAxis,
									series:[{
									"name": "节流前温度",
									"data": _self.yAxis5,
									},{
									"name": "节流后温度",
									"data": _self.yAxis6,
									},]
								};
								let LineE={
									categories: _self.tempAxis,
									series:[{
									"name": "计量瞬量",
									"data": _self.yAxis4,
									},]
								};
								_self.drawCharts11("canvasLineA",LineA);
								_self.showLineC("canvasLineC",LineC);
								_self.showLineE("canvasLineE",LineE);
								_self.loadingA=false;
								if (subX === 0) {
								    this.requestingCount--
								    let x = []
								    let slList = []
								    let fhylList = []
								    let yyList = []
								    let tyList = []
								    let wdList = []
								    let jlhList = []
								    let jqylList = []
								    let pqylList = []
								    for (let i = 0; i < map.size; i++) {
								      x = x.concat(map.get(i))
								      slList = slList.concat(slMap.get(i))
								      fhylList = fhylList.concat(fhylMap.get(i))
								      yyList = yyList.concat(yyMap.get(i))
								      tyList = tyList.concat(tyMap.get(i))
								      wdList = wdList.concat(wdMap.get(i))
								      jlhList = jlhList.concat(jlhMap.get(i))
								      jqylList = jqylList.concat(jqylMap.get(i))
								      pqylList = pqylList.concat(pqylMap.get(i))
								    }
								    this.pressureChartData.xAxisData = x
								    this.instantChartData.xAxisData = x
								    this.temperatureChartData.xAxisData = x
								    this.ptInstnatChartData.xAxisData = x
								    this.inOutPressureChartData.xAxisData = x
								    this.instantChartData.firstyAxisData = slList
								    this.pressureChartData.thridyAxisData = fhylList
								    this.pressureChartData.firstyAxisData = yyList
								    this.pressureChartData.secondyAxisData = tyList
								    this.temperatureChartData.firstyAxisData = wdList
								    this.temperatureChartData.secondyAxisData = jlhList
								    this.inOutPressureChartData.firstyAxisData = jqylList
								    this.inOutPressureChartData.secondyAxisData = pqylList
								    // console.log(map)
								    // console.log(x)
								    }
								    if (map.size === length){
								      // console.log('moreMap')
								    let x = []
								    let slList = []
								    let fhylList = []
								    let yyList = []
								    let tyList = []
								    let wdList = []
								    let jlhList = []
								    let jqylList = []
								    let pqylList = []
								    for (let i = 0; i < map.size; i++) {
								        x = x.concat(map.get(i))
								        slList = slList.concat(slMap.get(i))
								        fhylList = fhylList.concat(fhylMap.get(i))
								        yyList = yyList.concat(yyMap.get(i))
								        tyList = tyList.concat(tyMap.get(i))
								        wdList = wdList.concat(wdMap.get(i))
								        jlhList = jlhList.concat(jlhMap.get(i))
								        jqylList = jqylList.concat(jqylMap.get(i))
								        pqylList = pqylList.concat(pqylMap.get(i))
								    }
								    this.ptInstnatChartData.xAxisData = x
								    }
							},
						});
					}
				});
			},

			//产水产气
			getWaterData(wellId){
				let t=(new Date().getTime()- 7 * 24 * 60 * 60 * 1000).toFixed();
				let tend=new Date().getTime().toFixed();
				var kk = getDateTime.dateTimeStr('y-m-d',new Date(Number(t)));
				var jj = getDateTime.dateTimeStr('y-m-d',new Date(Number(tend)));
				//console.log("eeeeeeeee");
				//判断是否为搜索
				if(this.isSearch === true){
					//console.log("搜索里面1");
					this.startDate=this.datetimerange[0];
					this.endDate=this.datetimerange[1];
					var kk2 = getDateTime.dateTimeStr('y-m-d',new Date(this.startDate));
					var jj1 = getDateTime.dateTimeStr('y-m-d',new Date(this.endDate));
					kk = kk2;
					jj = jj1;
					 if(jj==jj1){
						 if(jj1==kk2){
							 let t222=(new Date().getTime()- 24 * 60 * 60 * 1000).toFixed();
							kk = getDateTime.dateTimeStr('y-m-d',new Date(Number(t222)));
							jj = jj1;
						 }
					 }
					/* console.log(kk);
					console.log(jj); */
				};
				let a2IdUrl = _self.$requestUrl.requestUrl('/app')+'/zhusai/waterAndGas/a2Id?wellId='+wellId;
				//let a2IdUrl = 'http://127.0.0.1:9115'+'/zhusai/waterAndGas/a2Id?wellId='+wellId
				uni.request({
					url: a2IdUrl,
					data:{
					},
					success:function(resp){
						/* console.log("ooooooooo");
						console.log(resp); */
						let waterUrl = _self.$requestUrl.requestUrl('/app')+'/zhusai/waterAndGas/selectMonth?a2_id='+resp.data+'&startData='+kk+'&endData='+jj;
						//let waterUrl = 'http://127.0.0.1:9115'+'/zhusai/waterAndGas/selectMonth?a2_id='+resp.data+'&startData='+kk+'&endData='+jj;
						//let waterUrl = 'http://127.0.0.1:9115'+'/zhusai/waterAndGas/selectMonth?a2_id='+resp.data;
						uni.request({
							url: waterUrl,
							data:{
							},
							success: function(resp) {
								/* console.log("ooooooooo");
								console.log(resp); */
								let data = resp.data
								let waterAxis=[]
								let wateryAxis=[]
								let gasyAxis=[]
								if(data){
									for(let i=0;i<=data.length-1;i++){
										if(data[i].water== null){
											wateryAxis[i]= 0;
										}else{
											wateryAxis[i]= parseFloat(data[i].water);
										};
										if(data[i].gas == null){
											gasyAxis[i]= 0;
										}else{
											gasyAxis[i]= data[i].gas/10000;//缩进一位
										};
										waterAxis[i] = data[i].dates;


									}
									_self.waterAxis=waterAxis;
									_self.wateryAxis=wateryAxis;
									//测试
									_self.gasyAxis=gasyAxis;
									/* console.log("rrrrrr");
									console.log(_self.waterAxis);
									console.log(_self.wateryAxis);
									console.log(_self.gasyAxis); */
									//处理y轴
									//xAxisMax()
									//_self.waterAxisMax=xAxisMax()
									//_self.waterAxisMax =Math.ceil(gasyAxis.sort()[gasyAxis.length-1]/5)*5;
									_self.waterAxisMax = _self.xAxisMax2(gasyAxis);
									let www = _self.xAxisMax2(wateryAxis);
									if(_self.waterAxisMax>=www){
										_self.waterAxisMax=_self.waterAxisMax
									}else{
										_self.waterAxisMax=www
									}
								}
								let LineB={
									categories: _self.waterAxis,

									series:[{
										"smooth":true,
										"name": "产水量",
										"data": _self.wateryAxis,

									},{
										"smooth":true,
										"index":1,
										"name": "产气量",
										"data": _self.gasyAxis,
									}],
								};
								_self.loadingB=false;
								_self.drawCharts("canvasLineB",LineB);

							}
						})
					},
				})
			},
			//计算时间的
			daysDistances(date1, date2) {
			        let distance;
			        date1 = Date.parse(date1);
			        date2 = Date.parse(date2);
			        //计算两个日期之间相差的毫秒数
			        distance = date2 - date1;

			        //毫秒数除以一天的毫秒数,就的到了天数
			        let oneDay = 24 * 3600 * 1000
			        distance = Math.floor(distance / (oneDay));

			        if (distance >= 3){
			          let x = 3
			          distance = Math.ceil(distance/x);
			          let startList = []
			          let endList = []
			          for (let i = 0; i < distance; i++) {
			            if (i === distance-1){
			              startList[i] = timeTrans(new Date(date1 + i*x*oneDay + 1000))
			              endList[i] = timeTrans(new Date(date2))
			            } else {
			              startList[i] = timeTrans(new Date(date1 + i * x * oneDay + 1000))
			              endList[i] = timeTrans(new Date(date1 + (i + 1) * x * oneDay))
			            }
			          }
			          this.testStartList = startList
			          this.testEndList = endList
			        }else {
			          return 1
			        }
			        return distance;
			      },
			//预警信息
			// 由于采集的实时数据传过去时间范围大于10天就会失败（数据量过大），所有将大于等于8天的时间进行分割
			daysDistance(date1, date2) {
			        let distance;
			        date1 = Date.parse(date1);
			        date2 = Date.parse(date2);
			        //计算两个日期之间相差的毫秒数
			        distance = date2 - date1;

			        //毫秒数除以一天的毫秒数,就的到了天数
			        let oneDay = 24 * 3600 * 1000
			        distance = Math.floor(distance / (oneDay));

			        if (distance >= 3){
			          let x = 3
			          distance = Math.ceil(distance/x);
			          let startList = []
			          let endList = []
			          for (let i = 0; i < distance; i++) {
			            if (i === distance-1){
			              startList[i] = timeTrans(new Date(date1 + i*x*oneDay + 1000))
			              endList[i] = timeTrans(new Date(date2))
			            } else {
			              startList[i] = timeTrans(new Date(date1 + i * x * oneDay + 1000))
			              endList[i] = timeTrans(new Date(date1 + (i + 1) * x * oneDay))
			            }
			          }
			          this.startList = startList
			          this.endList = endList
			        }else {
			          return 1
			        }
			        return distance;
			},
			/* getWarning(wellId){
				//let url = this.headerUrl.intranet+'zsgl/warningInfo/?wellId='+wellId
				let url  = this.$requestUrl.requestUrl('/zs')+'/zsgl/warningInfo/?wellId='+wellId;
				uni.request({
					url: url,
					data: {
					},
					success: function(resp){
						_self.waringText = resp.data.data;

					}
				})
			}, */
			drawCharts11(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance7[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 500,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "MPa",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: 0,
			                max: null,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			showLineA(id,data){
				const ctx = uni.createCanvasContext(id, this);
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					context: ctx,
					colors:['#e72167', '#526c8f','#00a5f8'],
					fontSize:13,
					padding:[15,50,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					//enableScroll: true,
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#ff0000',
						gridType:'dash',
						dashLength:8,
						scrollShow:true,
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
						scrollColor:'#ff0000',//默认为 #ff0000
						labelCount: 1,
						disableGrid:true,
						fontSize:12,
					},
					yAxis: {

						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						data:[{
							title:"MPa",
							max:_self.pressureAxisMax,
							min:0,
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
						}]

					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
			},

			showLineB(canvasId,chartData){
				/* console.log(">>>>>>>>>>>");
				console.log(canvasId);
				console.log(chartData); */
				canvaLineB=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					colors:['#ff0000', '#0175f0'],
					fontSize:13,

					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					onzoom:true,//图标放大
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						labelCount: 1,
						disableGrid:true,
						showTitle:true,
						fontSize:12,
					},
					yAxis: {
						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						 data: [{
							title: "m³/d",
							min:0,
							max:_self.waterAxisMax,
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
							}, {
							position: 'right',
							title: 'm³/d',
							min:0,
							max:_self.waterAxisMax,
							tofix: 2,
								}],

					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'curve'
						}
					}
				});

			},

			showLineC(id,data){
			  const ctx = uni.createCanvasContext(id, this);
			  uChartsInstance3[id] = new uCharts({
			    type: "line",
			    context: ctx,
			    width: this.cWidth,
			    height: this.cHeight,
			    categories: data.categories,
			    series: data.series,
			    animation: true,
			    timing: "easeOut",
			    duration: 1000,
			    rotate: false,
			    rotateLock: false,
			    background: "#FFFFFF",
			    color: ["#1890FF","#EE6666"],
			    padding: [15,10,0,15],
			    fontSize: 13,
			    fontColor: "#666666",
			    dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			    dataPointShape: false,//显示曲线上的点位
			    dataPointShapeType: "solid",
			    touchMoveLimit: 60,
			    enableScroll: true,
			    enableMarkLine: false,
			    legend: {
			      show: true,
			      position: "bottom",
			      float: "center",
			      padding: 5,
			      margin: 5,
			      backgroundColor: "rgba(0,0,0,0)",
			      borderColor: "rgba(0,0,0,0)",
			      borderWidth: 0,
			      fontSize: 13,
			      fontColor: "#666666",
			      lineHeight: 11,
			      hiddenColor: "#CECECE",
			      itemGap: 10
			    },
			    xAxis: {
			      disableGrid: true,
			      disabled: false,
			      axisLine: true,
			      axisLineColor: "#CCCCCC",
			      calibration: false,
			      fontColor: "#666666",
			      fontSize: 8,
			      rotateLabel: true,
			      rotateAngle: 30,
			      itemCount: 500,
				  labelCount:5,//x轴单屏数据显示的个数分类
			      boundaryGap: "center",
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      gridType: "solid",
			      dashLength: 0,
			      gridEval: 4,
			      scrollShow: false,
			      scrollAlign: "left",
			      scrollColor: "#A6A6A6",
			      scrollBackgroundColor: "#EFEBEF",
			      formatter: ""
			    },
			    yAxis: {
			      gridType: "dash",
			      dashLength: 2,
			      disabled: false,
			      disableGrid: false,
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      padding: 10,
			      showTitle: true,
			      data: [
			        {
			          type: "value",
			          position: "left",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "right",
			          title: "℃",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: -1,
			          max: _self.yAxis6Max,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        },
			        {
			          type: "value",
			          position: "right",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "left",
			          title: "℃",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: -1,
			          max: _self.yAxis6Max,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        }
			      ]
			    },
			    extra: {
			      line: {
			        type: "curve",
			        width: 2
			      },
			      tooltip: {
			        showBox: true,
			        showArrow: true,
			        showCategory: true,
			        borderWidth: 0,
			        borderRadius: 0,
			        borderColor: "#000000",
			        borderOpacity: 0.7,
			        bgColor: "#000000",
			        bgOpacity: 0.7,
			        gridType: "solid",
			        dashLength: 4,
			        gridColor: "#CCCCCC",
			        fontColor: "#FFFFFF",
			        splitLine: true,
			        horizentalLine: false,
			        xAxisLabel: false,
			        yAxisLabel: false,
			        labelBgColor: "#FFFFFF",
			        labelBgOpacity: 0.7,
			        labelFontColor: "#666666"
			      },
			      markLine: {
			        type: "solid",
			        dashLength: 4,
			        data: []
			      }
			    }
			  });
			},
			showLineD(id,data){
			  const ctx = uni.createCanvasContext(id, this);
			  uChartsInstance4[id] = new uCharts({
			    type: "line",
			    context: ctx,
			    width: this.cWidth,
			    height: this.cHeight,
			    categories: data.categories,
			    series: data.series,
			    animation: true,
			    timing: "easeOut",
			    duration: 1000,
			    rotate: false,
			    rotateLock: false,
			    background: "#FFFFFF",
			    color: ["#1890FF","#EE6666"],
			    padding: [15,10,0,15],
			    fontSize: 13,
			    fontColor: "#666666",
			    dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			    dataPointShape: false,
			    dataPointShapeType: "solid",
			    touchMoveLimit: 60,
			    enableScroll: true,
			    enableMarkLine: false,
			    legend: {
			      show: true,
			      position: "bottom",
			      float: "center",
			      padding: 5,
			      margin: 5,
			      backgroundColor: "rgba(0,0,0,0)",
			      borderColor: "rgba(0,0,0,0)",
			      borderWidth: 0,
			      fontSize: 13,
			      fontColor: "#666666",
			      lineHeight: 11,
			      hiddenColor: "#CECECE",
			      itemGap: 10
			    },
			    xAxis: {
			      disableGrid: true,
			      disabled: false,
			      axisLine: true,
			      axisLineColor: "#CCCCCC",
			      calibration: false,
			      fontColor: "#666666",
			      fontSize: 8,
			      rotateLabel: true,
			      rotateAngle: 30,
			      itemCount: 500,
				  labelCount:5,//x轴单屏数据显示的个数分类
			      boundaryGap: "center",
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      gridType: "solid",
			      dashLength: 0,
			      gridEval: 4,
			      scrollShow: false,
			      scrollAlign: "left",
			      scrollColor: "#A6A6A6",
			      scrollBackgroundColor: "#EFEBEF",
			      formatter: ""
			    },
			    yAxis: {
			      gridType: "dash",
			      dashLength: 2,
			      disabled: false,
			      disableGrid: false,
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      padding: 10,
			      showTitle: true,
			      data: [
			        {
			          type: "value",
			          position: "left",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "right",
			          title: "10⁴m³/d",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: 0,
			          max: _self.yAxis7Max,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        },
			        {
			          type: "value",
			          position: "right",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "left",
			          title: "10⁴m³/d",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: 0,
			          max: _self.yAxis7Max,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        }
			      ]
			    },
			    extra: {
			      line: {
			        type: "curve",
			        width: 2
			      },
			      tooltip: {
			        showBox: true,
			        showArrow: true,
			        showCategory: true,
			        borderWidth: 0,
			        borderRadius: 0,
			        borderColor: "#000000",
			        borderOpacity: 0.7,
			        bgColor: "#000000",
			        bgOpacity: 0.7,
			        gridType: "solid",
			        dashLength: 4,
			        gridColor: "#CCCCCC",
			        fontColor: "#FFFFFF",
			        splitLine: true,
			        horizentalLine: false,
			        xAxisLabel: false,
			        yAxisLabel: false,
			        labelBgColor: "#FFFFFF",
			        labelBgOpacity: 0.7,
			        labelFontColor: "#666666"
			      },
			      markLine: {
			        type: "solid",
			        dashLength: 4,
			        data: []
			      }
			    }
			  });
			},
			showLineE(id,data){
			  const ctx = uni.createCanvasContext(id, this);
			  uChartsInstance5[id] = new uCharts({
			    type: "line",
			    context: ctx,
			    width: this.cWidth,
			    height: this.cHeight,
			    categories: data.categories,
			    series: data.series,
			    animation: true,
			    timing: "easeOut",
			    duration: 1000,
			    rotate: false,
			    rotateLock: false,
			    background: "#FFFFFF",
			    color: ["#1890FF","#EE6666"],
			    padding: [15,10,0,15],
			    fontSize: 13,
			    fontColor: "#666666",
			    dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			    dataPointShape: false,
			    dataPointShapeType: "solid",
			    touchMoveLimit: 60,
			    enableScroll: true,
			    enableMarkLine: false,
			    legend: {
			      show: true,
			      position: "bottom",
			      float: "center",
			      padding: 5,
			      margin: 5,
			      backgroundColor: "rgba(0,0,0,0)",
			      borderColor: "rgba(0,0,0,0)",
			      borderWidth: 0,
			      fontSize: 13,
			      fontColor: "#666666",
			      lineHeight: 13,
			      hiddenColor: "#CECECE",
			      itemGap: 10
			    },
			    xAxis: {
			      disableGrid: true,
			      disabled: false,
			      axisLine: true,
			      axisLineColor: "#CCCCCC",
			      calibration: false,
			      fontColor: "#666666",
			      fontSize: 8,
			      rotateLabel: true,
			      rotateAngle: 30,
			      itemCount: 500,
				  labelCount:5,//x轴单屏数据显示的个数分类
			      boundaryGap: "center",
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      gridType: "solid",
			      dashLength: 4,
			      gridEval: 1,
			      scrollShow: false,
			      scrollAlign: "left",
			      scrollColor: "#A6A6A6",
			      scrollBackgroundColor: "#EFEBEF",
			      formatter: ""
			    },
			    yAxis: {
			      gridType: "dash",
			      dashLength: 2,
			      disabled: false,
			      disableGrid: false,
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      padding: 10,
			      showTitle: true,
			      data: [
			        {
			          type: "value",
			          position: "left",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "right",
			          title: "10⁴m³/d",
			          titleFontSize: 11,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: 0,
			          max:null,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        },
			        {
			          type: "value",
			          position: "right",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "left",
			          title: "10⁴m³/d",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: 0,
			          max: _self.yAxis4Max,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        }
			      ]
			    },
			    extra: {
			      line: {
			        type: "curve",
			        width: 2
			      },
			      tooltip: {
			        showBox: true,
			        showArrow: true,
			        showCategory: true,
			        borderWidth: 0,
			        borderRadius: 0,
			        borderColor: "#000000",
			        borderOpacity: 0.7,
			        bgColor: "#000000",
			        bgOpacity: 0.7,
			        gridType: "solid",
			        dashLength: 4,
			        gridColor: "#CCCCCC",
			        fontColor: "#FFFFFF",
			        splitLine: true,
			        horizentalLine: false,
			        xAxisLabel: false,
			        yAxisLabel: false,
			        labelBgColor: "#FFFFFF",
			        labelBgOpacity: 0.7,
			        labelFontColor: "#666666"
			      },
			      markLine: {
			        type: "solid",
			        dashLength: 4,
			        data: []
			      }
			    }
			  });
			},

			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			touchLineB(e) {
				lastMoveTime2=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;

				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			moveLineB(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime2;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime2 = currMoveTime;

				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineB(e){
				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineB.touchLegend(e);
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchLineA1(e){
			  uChartsInstance7[e.target.id].scrollStart(e);
			},
			moveLineA1(e){
			 uChartsInstance7[e.target.id].scroll(e);
			},
			touchEndLineA1(e){
			  uChartsInstance7[e.target.id].scrollEnd(e);
			  uChartsInstance7[e.target.id].touchLegend(e);
			  uChartsInstance7[e.target.id].showToolTip(e);
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			},
			sliderMove(e){
				_self.itemCount=e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			tapButton(type){
				let step=5;
				if(type=='in'){
					_self.itemCount -= step;
					if(_self.itemCount<=5){
						_self.itemCount=5;
					}
				}else{
					_self.itemCount += step;
					if(_self.itemCount>=_self.sliderMax){
						_self.itemCount=_self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			formSecondToWord(val){
				let theTime = parseInt(val);// 秒
				let middle = 0;// 分
				let hour = 0;// 小时

				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
						if (middle > 60) {
							hour = parseInt(middle / 60);
							middle = parseInt(middle % 60);
						}
					}
				let result = ""+parseInt(theTime)+"秒";
				if (middle > 0) {
				result = "" + parseInt(middle) + "分" + result;
				}
				if (hour > 0) {
					result = "" + parseInt(hour) + "小时" + result;
				}
				return result;
			},
			xAxisMax(arr){
				let max = 0;
				for(let i=0 ; i<arr.length ; i++){
					if(arr[i]){
						if(arr[i]>max){
							max = arr[i];
						}
					}
				};
				return max;
			},
			xAxisMax2(arr){
				let max = 0;
				//console.log("查看最大数组");
				for(let i=0 ; i<arr.length ; i++){
					if(arr[i]){
						if(Number(arr[i])>max){
							max = Number(arr[i]);
						}
					}
				};

				return Math.ceil(max);
			},
			drawCharts(id,data){
			  const ctx = uni.createCanvasContext(id, this);
			  uChartsInstance[id] = new uCharts({
			    type: "line",
			    context: ctx,
			    width: this.cWidth,
			    height: this.cHeight,
			    categories: data.categories,
			    series: data.series,
			    animation: true,
			    timing: "easeOut",
			    duration: 1000,
			    rotate: false,
			    rotateLock: false,
			    background: "#FFFFFF",
			    color: ["#d80000","#4b97e2"],
			    padding: [15,10,0,15],
			    fontSize: 15,
			    fontColor: "#666666",
			    dataLabel: false,
			    dataPointShape: true,
			    dataPointShapeType: "solid",
			    touchMoveLimit: 60,
			    enableScroll: true,
			    enableMarkLine: false,
			    legend: {
			      show: true,
			      position: "bottom",
			      float: "center",
			      padding: 5,
			      margin: 5,
			      backgroundColor: "rgba(0,0,0,0)",
			      borderColor: "rgba(0,0,0,0)",
			      borderWidth: 0,
			      fontSize: 13,
			      fontColor: "#666666",
			      lineHeight: 11,
			      hiddenColor: "#CECECE",
			      itemGap: 10
			    },
			    xAxis: {
			      disableGrid: true,
			      disabled: false,
			      axisLine: true,
			      axisLineColor: "#CCCCCC",
			      calibration: false,
			      fontColor: "#666666",
			      fontSize: 8,
			      rotateLabel: true,
			      rotateAngle: 45,
			      itemCount: 20,
			      boundaryGap: "center",
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      gridType: "solid",
			      dashLength: 4,
			      gridEval: 1,
			      scrollShow: false,
			      scrollAlign: "left",
			      scrollColor: "#A6A6A6",
			      scrollBackgroundColor: "#EFEBEF",
			      formatter: ""
			    },
			    yAxis: {
			      gridType: "dash",
			      dashLength: 1,
			      disabled: false,
			      disableGrid: false,
			      splitNumber: 5,
			      gridColor: "#CCCCCC",
			      padding: 10,
			      showTitle: true,
			      data: [
			        {
			          type: "value",
			          position: "left",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "right",
			          title: "产气量(10⁴m³/d)",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: -0.1,
			          max: _self.waterAxisMax,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        },
			        {
			          type: "value",
			          position: "right",
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 13,
			          textAlign: "left",
			          title: "产水量(m³/d)",
			          titleFontSize: 13,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          min: -0.1,
			          max: _self.waterAxisMax,
			          tofix: 2,
			          unit: "",
			          formatter: ""
			        }
			      ]
			    },
			    extra: {
			      line: {
			        type: "curve",
			        width: 2
			      },
			      tooltip: {
			                  showBox: true,
			                  showArrow: true,
			                  showCategory: true,
			                  borderWidth: 0,
			                  borderRadius: 0,
			                  borderColor: "#000000",
			                  borderOpacity: 0.7,
			                  bgColor: "#000000",
			                  bgOpacity: 0.7,
			                  gridType: "solid",
			                  dashLength: 4,
			                  gridColor: "#CCCCCC",
			                  fontColor: "#FFFFFF",
			                  splitLine: true,
			                  horizentalLine: false,
			                  xAxisLabel: false,
			                  yAxisLabel: false,
			                  labelBgColor: "#FFFFFF",
			                  labelBgOpacity: 0.7,
			                  labelFontColor: "#666666"
			                },
			      markLine: {
			        type: "solid",
			        dashLength: 4,
			        data: []
			      }
			    }
			  });
			},
			touchstart(e){
			  uChartsInstance[e.target.id].scrollStart(e);
			},
			touchmove(e){
			 uChartsInstance[e.target.id].scroll(e);
			 //uChartsInstance[e.target.id].zoom(9);
			},
			touchend(e){
			  uChartsInstance[e.target.id].scrollEnd(e);
			  uChartsInstance[e.target.id].touchLegend(e);
			  uChartsInstance[e.target.id].showToolTip(e);
			},
			touchstart3(e){
			  uChartsInstance3[e.target.id].scrollStart(e);
			},
			touchmove3(e){
			  uChartsInstance3[e.target.id].scroll(e);
			},
			touchend3(e){
			  uChartsInstance3[e.target.id].scrollEnd(e);
			  uChartsInstance3[e.target.id].touchLegend(e);
			  uChartsInstance3[e.target.id].showToolTip(e);
			},
			touchstart4(e){
			  uChartsInstance4[e.target.id].scrollStart(e);
			},
			touchmove4(e){
			  uChartsInstance4[e.target.id].scroll(e);
			},
			touchend4(e){
			  uChartsInstance4[e.target.id].scrollEnd(e);
			  uChartsInstance4[e.target.id].touchLegend(e);
			  uChartsInstance4[e.target.id].showToolTip(e);
			},
			touchstart5(e){
			  uChartsInstance5[e.target.id].scrollStart(e);
			},
			touchmove5(e){
			  uChartsInstance5[e.target.id].scroll(e);
			  //uChartsInstance5[e.target.id].dobuleZoom(e);
			},
			touchend5(e){
			  uChartsInstance5[e.target.id].scrollEnd(e);
			  uChartsInstance5[e.target.id].touchLegend(e);
			  uChartsInstance5[e.target.id].showToolTip(e);
			}
		}
	}
</script>

<style>
	.saqwe1{
		font-size: 20rpx;
		margin-left: 20rpx;
	}
	.saqwe2{
		/* margin-top: -25rpx; */
		margin-left: 110rpx;
	}
	.saqwe3{
		font-size: 20rpx;
		margin-left: 260rpx;
	}
	.saqwe4{
		margin-top: -23px;
		margin-left: 350rpx;
	}
	.saqwe5{
		margin-top: -27rpx;
	}
	.saqwe6{
		width: 120rpx;
		height: 15rpx;
		margin-left: 540rpx;
		margin-top: -30rpx;
	}
	.sad11{
		font-size: 30rpx;
	}
	.wqeqwe{
		font-size: 15px;
		height: 35px;
	}
	.button{
		width: 60px;
		height: 10px;
		margin-left: 100px;
		margin-top: -10px;
	}
	.example-body {
			background-color: #fff;
			padding: 20rpx;
		}
	.inter22{
		margin-left: 10px;
		width: 80px;
		height: 10px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content-B {
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
	}
	.title{
		height: 44rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #424242;
		line-height: 44rpx;
		margin-left: 32rpx;
	}
	.title-B{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #8f8f94;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text{
		width: 50%;
		size: 24rpx;
		font-size: 36rpx;
		color: #565658;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.text2{
		width: 50%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		border-right: solid 1rpx #b7bbc2;
	}
	.text2-B{
		width: 33%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.zsState-A{
		width: 100%;
		text-align: left;
		margin-top: 8px;

		font-size: 14px;
		font-weight: bold;
		color: #858585;
		line-height: 22px;

	}
	.zsState-B{
		width: 100%;
		text-align: right;
		margin-top: 8px;

		font-size: 14px;
		font-weight: bold;
		color: #F09B00;
		line-height: 22px;
	}
	.zsState-C{
		width: 100%;
		size: 24rpx;
		font-size: 36rpx;
		font-weight:600;
		color: #707070;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		padding-top: 10rpx;
	}
	.AAA{
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}
	.AAA-1{
		margin-bottom: 20rpx;
	}
	.BBB{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.CCC{
		height: 50rpx;
	}
	.headline-A{
		width: 4px;
		height: 20px;
		background: #F09B00;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.headline-B{
		width: 90%;
		margin-top: 10px;
	}
	.zsjzt{
		width: 80%;
		display: flex;
		flex-direction:row;
	}
	.yj-A{
		width: 6px;
		height: 6px;
		background: #C4C4C4;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-A2{
		width: 6px;
		height: 6px;
		background: #F02B00;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-B{
		width: 40px;
		height: 12px;
		background: #BED57D;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B2{
		width: 40px;
		height: 14px;
		background: #F02B00;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B-text{
		width: 40px;
		font-size: 7px;
		font-weight: 300;
		color: #FFFFFF;
	}
	.yj-B-text2{
		width: 40px;
		font-size: 9px;
		font-weight: 400;
		color: #ff5500;
	}
	.yj-C-text{
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #C3BEBA;
		line-height: 22px;
		margin-left: 8px;
	}
	.yj-C-text2{
		font-size: 14px;
		font-weight: bold;
		color: #727272;
		line-height: 22px;
		margin-left: 8px;
		text-align: center;
	}
	.yj-D-text{
		margin-left: 10px;
		text-align: center;

		font-size: 12px;
		font-weight: 400;
		color: #C3BEBA;

	}
	.loading1{
		margin-top: 50px;
	}
	.scroll-Y {
		height: 200rpx;
	}
	.scroll-x2{
		width: 300px;
	}
</style>
